<template>
  <view class="">
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="false"
      @scroll="scrollMe"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 个人信息 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-3 p-4">
        <!-- 用户ID -->
        <view class="bg-[#FFFFFF] rounded-[.75rem]">
          <view class="flex justify-between items-center px-4 py-3">
            <view class="text-[1rem] text-[#171B24]">用户ID</view>
            <view class="flex items-center">
              <view class="text-[.875rem] text-[#919499]"> {{ vk.vuex.get('$user.userInfo.uid') }} </view>
            </view>
          </view>
        </view>
        <!-- 头像 昵称 个人介绍 -->
        <view class="bg-[#FFFFFF] rounded-[.75rem]">
          <view class="flex justify-between items-center px-4 py-3" @click="uploadPictures">
            <view class="text-[1rem] text-[#171B24]">头像</view>
            <view class="flex gap-1 items-center">
              <view class="size-[1.875rem] bg-gray-300 rounded-full overflow-hidden">
                <u-image
                  class="!size-full"
                  shape="circle"
                  :src="
                    vk.vuex.get('$user.userInfo.avatar')
                      ? vk.myfn.handleImageUrl(vk.vuex.get('$user.userInfo.avatar'))
                      : '/static/dddr103.png'
                  "
                ></u-image>
              </view>
              <view>
                <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
              </view>
            </view>
          </view>
          <view
            class="flex gap-2 justify-between items-center px-4 py-3"
            @click="vk.navigateTo('editNickname?nickname=' + vk.getVuex('$user.userInfo.nickname'))"
          >
            <view class="text-[1rem] text-[#171B24] flex-none">昵称</view>
            <view class="flex gap-1 items-center">
              <view class="text-[.875rem] text-[#919499] line-clamp-1"
                >{{ vk.getVuex('$user.userInfo.nickname') }}
              </view>
              <view>
                <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
              </view>
            </view>
          </view>
          <view
            class="flex gap-5 justify-between items-center px-4 py-3"
            @click="vk.navigateTo('editDescription?nickname=' + vk.getVuex('$user.userInfo.motto'))"
          >
            <view class="text-[1rem] text-[#171B24] flex-none">个人简介</view>
            <view class="flex gap-1 items-center">
              <view class="text-[.875rem] text-[#919499] line-clamp-1">
                <view>{{ vk.getVuex('$user.userInfo.motto') || '点击添加' }} </view>
              </view>
              <view>
                <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
              </view>
            </view>
          </view>
          <!-- <view class="flex justify-between items-center px-4 py-3" @click="!vk.getVuex('$user.userInfo.mobile') || vk.navigateTo('bindPhone')">
            <view class="text-[1rem] text-[#171B24]">手机号码</view>
            <view class="flex gap-1 items-center">
              <view class="text-[.875rem] text-[#919499]">
                <view>{{ vk.getVuex('$user.userInfo.mobile') || '点击添加' }} </view>
              </view>
              <view>
                <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
              </view>
            </view>
          </view> -->
        </view>
        <!-- 性别  生日 地区 -->
        <view class="bg-[#FFFFFF] rounded-[.75rem]">
          <view class="flex justify-between items-center px-4 py-3" @click="gender.openGender = true">
            <view class="text-[1rem] text-[#171B24]">性别</view>
            <view class="flex gap-1 items-center">
              <view class="text-[.875rem] text-[#919499]">{{
                {
                  '0': '未知',
                  '1': '男',
                  '2': '女'
                }[vk.getVuex('$user.userInfo.gender')] || '点击添加'
              }}</view>
              <view>
                <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
              </view>
            </view>
          </view>
          <view class="flex justify-between items-center px-4 py-3" @click="birthday.openBirthday = true">
            <view class="text-[1rem] text-[#171B24]">生日</view>
            <view class="flex gap-1 items-center">
              <view class="text-[.875rem] text-[#919499]">
                {{ vk.getVuex('$user.userInfo.age') ? `${vk.getVuex('$user.userInfo.age')}岁` : '点击添加' }}
              </view>
              <view>
                <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
              </view>
            </view>
          </view>
          <view class="flex gap-2 justify-between items-center px-4 py-3" @click="area.openArea = true">
            <view class="text-[1rem] text-[#171B24] whitespace-nowrap">地区</view>
            <view class="flex gap-1 items-center">
              <view class="text-[.875rem] text-[#919499] line-clamp-1">{{ areat() || '点击添加' }}</view>
              <view>
                <u-icon name="arrow-right" size="26" color="#919499"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </yy-paging>
    <!-- 性别 -->
    <u-picker
      v-model="gender.openGender"
      title="选择性别"
      :range="gender.genderList"
      mode="selector"
      @confirm="genderConfirmation"
    >
      <u-gap bg-color="#F2F5F7" height="3px"></u-gap>
      <view class="flex flex-col px-5 py-3">
        <view class="w-full h-[]"></view>
        <view class="flex justify-between items-center">
          <view class="text-[.875rem] text-[#161A24]">展示年龄标签</view>
          <switch :checked="ageTag" @change="changeAgeTag" color="#00A9AB" style="transform: scale(0.7)" />
        </view>
      </view>
    </u-picker>
    <!-- 生日 -->
    <u-picker
      v-model="birthday.openBirthday"
      :endYear="endYear"
      title="选择生日"
      mode="time"
      :max-today="true"
      @confirm="confirmBirthday"
    >
      <u-gap bg-color="#F2F5F7" height="3px"></u-gap>
      <view class="flex flex-col px-5 py-3">
        <view class="w-full h-[]"></view>
        <view class="flex justify-between items-center">
          <view class="text-[.875rem] text-[#161A24]">展示生日标签</view>
          <switch :checked="birthdayTag" @change="changeBirthdayTag" color="#00A9AB" style="transform: scale(0.7)" />
        </view>
      </view>
    </u-picker>
    <!-- 地区 -->
    <u-picker v-model="area.openArea" title="选择城市" mode="region" @confirm="areaConfirmation" :params="params">
      <u-gap bg-color="#F2F5F7" height="3px"></u-gap>
      <view class="flex flex-col px-5 py-3">
        <view class="w-full h-[]"></view>
        <view class="flex justify-between items-center">
          <view class="text-[.875rem] text-[#161A24]">展示地区标签</view>
          <switch :checked="areaTag" @change="changeAreaTag" color="#00A9AB" style="transform: scale(0.7)" />
        </view>
      </view>
    </u-picker>
    <!-- 
    <view class="fixed inset-0 bg-[#000000] opacity-50">
      <view class="flex text-[#339933] text-lg" v-for="(i, k) in 30" :key="k">44{{ ++k }}</view>
    </view>
     -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        gender: {
          openGender: false, // 是否打开性别选择器
          genderList: ['未知', '男', '女'], // 性别列表
          value: '' // 选中的性别
        },
        birthday: {
          openBirthday: false, // 是否打开生日选择器
          value: '' // 选中的生日
        },
        area: {
          openArea: false, // 是否打开地区选择器
          value: '' // 选中的地区
        },
        endYear: new Date().getFullYear(), // 结束年份,
        params: {
          province: true,
          city: true,
          district: false
        },
        ageTag: false,
        birthdayTag: false,
        areaTag: false
      }
    },
    created() {
      // uni.$on('uAvatarCropper', async path => {
      //   function random_string(len) {
      //     len = len || 32
      //     var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      //     var maxPos = chars.length
      //     var pwd = ''
      //     for (let i = 0; i < len; i++) {
      //       pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      //     }
      //     return pwd
      //   }
      //   let date = new Date()
      //   let year = date.getFullYear()
      //   let month = String(date.getMonth() + 1).padStart(2, '0')
      //   let day = String(date.getDate()).padStart(2, '0')
      //   let randomStr = random_string(8)
      //   let timestamp = new Date().getTime()
      //   let fileName = `storage/images/${year}${month}${day}/${timestamp}_${randomStr}.jpg`
      //   let res = await vk.myfn.fileUpload('image', path, fileName)
      //   let re = await api.editAvatar({ avatar: res })
      //   vk.toast(re.msg)
      //   vk.vuex.dispatch('$user/getUserInfo')
      // })
    },

    methods: {
      changeAgeTag() {
        this.ageTag = !this.ageTag
      },
      changeBirthdayTag() {
        this.birthdayTag = !this.birthdayTag
      },
      changeAreaTag() {
        this.areaTag = !this.areaTag
      },
      areat() {
        if (vk.getVuex('$user.userInfo.province')) {
          return [vk.getVuex('$user.userInfo.province'), vk.getVuex('$user.userInfo.city')].join('-')
        }
        {
          return ''
        }
      },
      async areaConfirmation(e) {
        console.log('e==> ', e)
        let res = await api.editInfo({
          province: e.province.name,
          city: e.city.name,
          // district: e.area.name,
          province_code: e.province.code,
          city_code: e.city.code
          // district_code: e.area.code
        })
        if (res.code == 0) return
        vk.toast(res.msg)
        vk.vuex.dispatch('$user/getUserInfo')
      },
      async confirmBirthday(e) {
        this.birthday.value = `${e.year}-${e.month}-${e.day}`
        let res = await api.editInfo({
          birthday: this.birthday.value
        })
        if (res.code == 0) return
        vk.toast(res.msg)
        vk.vuex.dispatch('$user/getUserInfo')
      },
      async genderConfirmation(e) {
        // 性别:0=未知,1=男,2=女
        let res = await api.editInfo({
          gender: e[0]
        })
        if (res.code == 0) return
        vk.toast(res.msg)
        vk.vuex.dispatch('$user/getUserInfo')
      },
      async uploadPictures() {
        // this.$u.route({
        //   url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper',
        //   params: {
        //     destWidth: 200,
        //     rectWidth: 200,
        //     fileType: 'jpg'
        //   }
        // })

        try {
          const url = await vk.myfn.uploadImage({
            count: 1,
            topic: 'profilePicture'
          })
          console.log('url==> ', url)

          let re = await api.editAvatar({ avatar: url[0] })
          vk.toast(re.msg)
          vk.vuex.dispatch('$user/getUserInfo')
        } catch (err) {
          console.error('上传失败:', err)
        }
      },
      scrollMe(e) {
        // this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
